<template>
  <div>
    <add-item />
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <t-header />
      <tbody>
        <t-body :item="item" :index="index" v-for="(item,index) in goodList" :key="item.name"/>
      </tbody>
      <t-foot />
    </table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import AddItem from './components/addItem.vue'
import TBody from './components/tBody.vue'
import TFoot from './components/tFoot.vue'
import tHeader from './components/tHeader.vue'
export default {
  components: { tHeader, TBody, TFoot, AddItem },
  data () {
    return {}
  },

  computed: {
    ...mapState(['goodList'])
  }
}
</script>

<style></style>
